<template>
	<view class="movie_detail">
		<video class="movie_video" id="movie" :src="playUrl" controls @play="_play" :poster="details && details.thumb"></video>

		<oxeVideo ref='video' :isLive='boxIsLive' :callback='boxCallback' :style='boxStyle'></oxeVideo>

		<view v-show="navIndex === 0">
			<view class="movie_desc">
				<view class="movie_detail__nav">
					<view class="movie_nav__item mr_60" :class="{'movie_nav__item__a': navIndex === 0}"
						@click="tapNav(0)">影片详情</view>
					<view class="movie_nav__item" :class="{'movie_nav__item__a': navIndex === 1}" @click="tapNav(1)">
						评论（{{ details ? details.comment_num_str : 0 }}）</view>
				</view>
				<view class="movie_desc__content">
					<u-read-more :toggle="true" show-height="300" ref="uReadMore"
						v-if="details && details.intro.length > 1">
						<rich-text :nodes="details.intro"></rich-text>
					</u-read-more>
					<view v-html="details && details.intro" v-else></view>
				</view>
				<view class="movie_desc__foot">
					<view class="movie_desc__foot--left" v-if="details">
						<image src="@/static/xinjiang/star_fill.png" mode="aspectFit"
							class="movie_desc__foot--img mr_50" v-if="details.is_collect" @click="_cancelFavorite()"></image>
						<image src="@/static/xinjiang/star.png" mode="aspectFit"
							class="movie_desc__foot--img mr_50" v-else @click="_addFavorite()"></image>
						<!-- <image src="@/static/xinjiang/tv.png" mode="aspectFit" class="movie_desc__foot--img mr_50"></image> -->
						<image src="@/static/xinjiang/share.png" mode="aspectFit" class="movie_desc__foot--img"></image>
					</view>
					<view class="movie_desc__foot--right">倍速</view>
				</view>
			</view>

			<view class="movie_playback__source">
				<view class="movie_playback__source--title">播放源</view>
				<view class="movie_playback__source--list">
					<text class="movie_no__data" v-if="videoList.length === 0">暂无播放源~</text>
					<view class="movie_playback__source--item"
						:class="{'movie_playback__source--item---a': playIndex === index}"
						v-for="(item, index) in videoList" @click="togglePlay(index)">{{ item.title }}</view>
				</view>
			</view>

			<!-- <view class="movie_like">
				<view class="movie_like__head">
					<text class="movie_like__text">猜你喜欢</text>
					<image src="@/static/xinjiang/right_arrow.png" mode="aspectFit" class="movie_like__arrow"></image>
				</view>

				<view class="movie_like__list">
					<view class="movie_like__item" :class="{'mr_30': index % 2 === 0}" v-for="(item, index) in 5">
						<image src="https://unsplash.it/300/200?image=7" mode="aspectFill" class="movie_like__img">
						</image>
						<view class="movie_like__title">唐朝诡事录</view>
						<view class="movie_like__subtitle">探案分队调查《沙斯传》</view>
					</view>
				</view>
			</view> -->
		</view>

		<view v-show="navIndex === 1">
			<view class="movie_desc">
				<view class="movie_detail__nav">
					<view class="movie_nav__item mr_60" :class="{'movie_nav__item__a': navIndex === 0}"
						@click="tapNav(0)">影片详情</view>
					<view class="movie_nav__item" :class="{'movie_nav__item__a': navIndex === 1}" @click="tapNav(1)">
						评论（0）</view>
				</view>
			</view>

			<view class="movie_comment__box">
				<input type="text" placeholder="发表一下您对视频的意见..." class="movie_comment__input" v-model="commentContent"
					confirm-type="send" @confirm="_addComment()" />
			</view>
		</view>
	</view>
</template>

<script>
	const globalEvent = weex.requireModule('globalEvent');
	import {
		mapActions,
		mapState
	} from 'vuex'
	import {
		getVideo,
		getVideoList,
		getComment,
		addComment,
		historyAdd
	} from "@/js_sdk/video.js"
	import {addFavorite, cancelFavorite} from '@/common/api.js'
	import oxePlayerNvue from './oxePlayer/oxePlayer.nvue'

	export default {
		data() {
			return {
				details: null,
				videoId: '',
				playIndex: 0,
				videoList: [],
				navIndex: 0,
				videoContext: null,
				commentPage: 1,
				commentContent: '',
				boxStyle: {
					'height': '416.04rpx',
					'width': '750upx',
				},
				boxIsLive: false, //是否直播
				boxCallback: 'actionCallback', //公用监听名称多个播放器是自定义
				boxData: {
					data: []
				},
				ox: null
			}
		},
		components: {oxePlayerNvue},
		onLoad(options) {
			this.updateUserinfo()
			this.videoId = options.id
			this._getVideo()
			this._getVideoList()
			this.videoContext = uni.createVideoContext('movie')
			this._getComment()
		},
		computed: {
			...mapState(['userinfo']),
			playUrl() {
				return this.videoList.length ? this.videoList[this.playIndex].url : null
			}
		},
		onUnload() {
			this._addHistory()
		},
		mounted() {
			let param = {
				selectAutoPlay: true, //选集点击是否自动播放 默认自动播放
				forceDeviceOrientation: false, //旋转方向 true 全屏视频不旋转
				radius: 5, //圆角大小 默认 0 没有圆角
				scaleMode: 0, //0 :自动调节 默认  1自适应 2 全屏 有切边 3 全屏 android起作用 
				showBack: true, //返回按钮是否显示小屏幕
				showSelect: true, //选集按钮是否显示
				showSpeed: true, //倍速按钮是否显示
				showDefinition: true, //清晰度按钮是否显示
				showShot: true, //截图按钮是否显示
				showLock: true, //锁屏按钮是否显示
				failText: '播放失败，点击重播', //播放失败文字设定
				showDlna: {
					small: true,
					full: true
				}, //投屏按钮是否显示
				showDunmaku: {
					small: true,
					full: true
				}, //弹幕按钮是否显示
				showMore: {
					small: true,
					full: true
				}, //跟多按钮是否显示
				sliderColor: '#ff0000',
				showBottomProcess: true,
				autoPlay: false, //默认false
				openCache: true, //是否开启缓存
				// styles: styles,
				hideControl: false, //是否隐藏所有控件
				backgroundHolder: '', //视频背景图片
				backgroundAlpha: 0.3, //0 背景透明度
				nextIcon: '/static/next.png', //下一集按钮 支持 http
				lockIcon: {
					unlock: '/static/unlock.png',
					lock: 'widget://image/lock.png'
				}, //锁屏按钮 支持 http
				shotIcon: '/static/capture.png', //截屏按钮 支持 http
				startIcon: '/static/start.png', //中间开始播放圆形按钮 支持 http
				playIcon: {
					pauseIcon: '/static/pause.png',
					playIcon: '/static/play.png'
				}, //暂停播放按钮图标 支持 http
				fullSmallIcon: {
					fullIcon: '/static/fullscreen_exit.png',
					smallIcon: '/static/fullscreen.png'
				}, //切换大小屏按钮图标 支持 http
				seekbarStyle: {
					progressThumb: '/static/thumb.png',
					progressColor: '#50CDD4',
					bufferColor: '#FFFFFF'
				}, //滑动条样式 支持 http
				loop: false, //是否单急循环
				// ad: {
				// 	isShow: true,
				// 	url: 'http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&f=JPEG?w=1280&h=853',
				// 	skipUrl: 'http://wap.hao123.com'
				// }, //中间暂停广告，为空则不播放广告
				// vad: {
				// 	isShow: true,
				// 	isShowSkip: true,
				// 	type: 'image',
				// 	duration: 10,
				// 	url: 'https://cms-bucket.nosdn.127.net/eb411c2810f04ffa8aaafc42052b233820180418095416.jpeg',
				// 	skipUrl: 'http://wap.hao123.com'
				// }, //播放前视频广告 
				index: 0,
				data: [{
						uid: '', //扩展字段 用户id(可选，会随事件返回)
						vid: '', //扩展字段 视频id(可选，会随事件返回)
						title: '第一集',
						index: '01',
						thumb: 'https://cms-bucket.nosdn.127.net/eb411c2810f04ffa8aaafc42052b233820180418095416.jpeg',
						url: 'https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209105011F0zPoYzHry.mp4',
						headers: {} //头部信息json格式
					},
					{
						uid: '', //扩展字段 用户id(可选，会随事件返回)
						vid: '', //扩展字段 视频id(可选，会随事件返回)
						title: '第二集',
						index: '02',
						thumb: 'https://cms-bucket.nosdn.127.net/cb37178af1584c1588f4a01e5ecf323120180418133127.jpeg',
						url: 'https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209105011F0zPoYzHry.mp4',
						headers: {} //头部信息json格式
					}
				]
			}
			
			this.$nextTick(() => {
				const ox = this.$refs.video;
				ox.initVideoData(param);
			})
		
			globalEvent.addEventListener("actionCallback", (e) => {})
		},
		methods: {
			_addHistory() {
				historyAdd({
					movie_id: this.details.id,
					movie_detail_id: this.videoList[this.playIndex].id,
					second: 0
				}).then(() => {})
			},
			_addFavorite() {
				addFavorite({type: 4, vid: this.details.id}).then(({msg, code}) => {
					uni.showToast({
						title: msg
					})
					if (code === 200) {
						this.details.is_collect = 1
					}
				})
			},
			_cancelFavorite() {
				cancelFavorite({type: 4, vid: this.details.id}).then(({msg, code}) => {
					uni.showToast({
						title: msg
					})
					if (code === 200) {
						this.details.is_collect = 0
					}
				})
			},
			...mapActions(['updateUserinfo']),
			_play() {},
			_getVideo() {
				getVideo(this.videoId).then(({
					code,
					data
				}) => {
					this.details = data
					this.$nextTick(() => {
						this.$refs.uReadMore.init();
					})
					uni.setNavigationBarTitle({
						title: data.title
					})
				})
			},
			_getVideoList() {
				getVideoList(this.videoId).then(({
					code,
					data
				}) => {
					this.videoList = data.list
					// if (Array.isArray(data.list)) {
					// 	let i = 0;
					// 	while (i < data.list.length) {
					// 		const item = data.list[i]
					// 		this.boxData.data[i] = {}
					// 		this.boxData.data[i]['title'] = item.title
					// 		this.boxData.data[i]['index'] = i < 10 ? `0${i}` : i
					// 		this.boxData.data[i]['thumb'] = item.thumb
					// 		this.boxData.data[i]['url'] = item.url
					// 		i++;
					// 	}
					// }
					// this.ox = this.$refs.video;
					// this.ox.initVideoData(this.boxData);
				})
			},
			tapNav(index) {
				this.navIndex = index
			},
			togglePlay(index) {
				this.videoContext.stop()
				this.playIndex = index
				setTimeout(() => {
					this.videoContext.play()
				}, 500)
			},
			_getComment() {
				getComment({
					type: 3,
					oid: this.videoId,
					page: this.commentPage
				}).then(({
					code,
					data
				}) => {
					// console.log(data)
				})
			},
			_addComment() {
				addComment({
					type: 3,
					oid: this.videoId,
					content: this.commentContent
				}).then(({
					code,
					msg
				}) => {
					if (code === 200) {
						this.commentContent = ''
						uni.showToast({
							title: msg
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("movie_detail.scss");
</style>